function startdraw(todohtings){
	var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var width = ctx.canvas.width;
			var height = ctx.canvas.height;
			
			var reg40,reg200;
			var r = width / 2;
			//大圆线宽
			var linew1 = 15;
			var textSize = 10;  //设置文字大小
			var hourNumbers = [];
			var nnn = 1;
			for(var i = 0; i < 240; i++) {
				hourNumbers.push(i + 1);
			}
			//一格的角度
			var radavg = 2 * Math.PI / hourNumbers.length;
			var regavg = 360 / hourNumbers.length;
			//alert(regavg);
			//4分之1的角度
			var rads = radavg * (hourNumbers.length / 4);
			changes(canvas, ctx);
			var img = new Image();
			//	img.src = "img/test.png";
			img.src = "../img/icon-pointer.png";
			var imgW, imgH;
			img.onload = function() {
				imgW = this.width / 2;
				imgH = this.height / 2;
				drawClock(20);
			}

			function drawCircle(rrr) {

				if(nnn != 1) {
					//如果不是第一次，原点要重置到原位置
					ctx.translate(-r, -r);
				}
				nnn++;

				//ctx.fillText("嘿嘿",0, 0);
				ctx.clearRect(0, 0, width, width);
				ctx.translate(r, r);
				
				ctx.font = textSize + "px Arial"
				ctx.textAlign = "center";
				ctx.textBaseline = "middle";

				hourNumbers.forEach(function(item, index) {
					//画数字
					var rad = rads + radavg * index;
					var x = Math.cos(rad) * (r - 35);
					var y = Math.sin(rad) * (r - 35);
					if(item % 10 == 0 && item >= 20 && item <= 220) {
						if(item==20){
							reg40=rad;
						}
						if(item==220){
							reg200=rad;
						}
						ctx.fillText(item, x, y);
					}

				});

				for(var i = 0; i < hourNumbers.length; i++) {
					var rad = radavg * i;
					//画线
					var x = Math.cos(rad) * (r - 25);
					var y = Math.sin(rad) * (r - 25);
					var x2 = Math.cos(rad) * (r - 20);
					var y2 = Math.sin(rad) * (r - 20);
					ctx.lineWidth = 1;
					ctx.beginPath();
					ctx.moveTo(x, y);
					ctx.lineTo(x2, y2);
					ctx.stroke();

				}
				drawbg1();
				if(!rrr){
					rrr = reg40;
				}
				drawbg2(rrr);
			}
			//绘制外圆
			function drawbg1(){
				ctx.save();
				ctx.beginPath();
				//ctx.rotate(150 * Math.PI / 180);
				ctx.lineCap = "round";
				
				ctx.strokeStyle = "#a3a3a3";
				ctx.lineWidth = linew1;
				ctx.arc(0, 0, r - (linew1 / 2), reg40, reg200, false);
				ctx.stroke();
				//ctx.fill();
				ctx.restore();
			}
			
			//绘制外圆颜色
			function drawbg2(rrr){
				ctx.save();
				ctx.beginPath();
				//ctx.rotate(150 * Math.PI / 180);
				ctx.lineCap = "round";
				var lGrd = ctx.createLinearGradient(-150,0,150,0);
				lGrd.addColorStop(0, '#00d5c5');
				lGrd.addColorStop(0.6, 'yellow');
				lGrd.addColorStop(1, 'red');
				//ctx.fillStyle=lGrd;
				ctx.strokeStyle = lGrd;
				ctx.lineWidth = linew1;
				ctx.arc(0, 0, r - (linew1 / 2), reg40, rrr, false);
				ctx.stroke();
				//ctx.fill();
				ctx.restore();
			}
			
			//画指针
			function drawLines(num) {

				var rad = radavg * num + Math.PI;

				ctx.save();
				ctx.beginPath();
				ctx.rotate(rad);
			//	ctx.drawImage(img, 0 - (imgW / 2), 0 - imgH / 2 - imgW / 2 - 2, imgW, imgH);
				ctx.drawImage(img, 0 - (imgW / 3), 0 - imgH / 2, imgW/1.5, imgH/1.5);
				
				/*//console.log(num)
				ctx.lineWidth = 1;
				ctx.lineCap = "round";
				ctx.moveTo(0, 10);
				ctx.lineTo(0, r - 20);
				ctx.stroke();*/
				ctx.restore();
				
				if(todohtings){
					todohtings(num);
				}
			}

			function drawClock(num,rrr) {
				drawCircle(rrr);
				drawLines(num);

			}

			canvas.addEventListener("touchstart", function(e) {
				moves(e);
			});
			canvas.addEventListener("touchmove", function(e) {
				moves(e);
			});

			function moves(e) {

				var d = getXY(e.touches[0].clientX, e.touches[0].clientY)
				var cc = Math.atan2(d['y'], d['x']);
				var du = cc * 180 / Math.PI;
				if(du < 0) {
					du = -du;
				} else {
					du = 360 - du;
				}
				var real = du;
				if(du <= 90) {
					real = 360+real;
					du = 270 + du;
				} else {
					du = du - 90;
				}
				var kedu = parseInt(du / regavg);
				if(kedu >= 20 && kedu <= 220) {
					
					drawClock(kedu,real*Math.PI/180);
				}

			}
			
			function getXY(x, y) {

				var d = new Array();
				d['x'] = x - width / 2;
				d['y'] = width / 2 - y;
				return d;
			}

			/*解决模糊问题*/
			function changes(canvas, cxt) {
				var devicePixelRatio = window.devicePixelRatio || 1;
				var backingStoreRatio = cxt.webkitBackingStorePixelRatio ||
					cxt.mozBackingStorePixelRatio ||
					cxt.msBackingStorePixelRatio ||
					cxt.oBackingStorePixelRatio ||
					cxt.backingStorePixelRatio || 1;
				var ratio = devicePixelRatio / backingStoreRatio;
				canvas.width = canvas.width * ratio;
				canvas.height = canvas.height * ratio;
				cxt.scale(ratio, ratio);
				cxt.translate(0.5, 0.5);
			}
}
